<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>余额</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/index.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/dropload.css"/>
</head>
<style>
    .yue {
        color: #FF4B4A;
        text-align: right;
        width: 60px;
    }

    .weui-media-box_appmsg .weui-media-box__hd {
        width: 30px;
        height: 30px;
    }

    .weui-media-box__title {
        font-size: 14px;
    }

    .weui-media-box__desc {
        font-size: 12px;
    }

    .harder {
        background: #1AAD19;
        padding: 30px 30px 0 30px;
    }

    .conter {
        background: #fff;
        text-align: center;
        border-radius: 20px 20px 0 0;
        padding: 10px;
        color: #1AAD19;
        font-size: 13px;
    }

    .ictext {
        color: #858585;
        font-size: 12px;
    }

    .bonus {
        font-size: 25px;
    }

    .nav {
        width: 100%;
        height: 37px;
        display: flex;
        flex-direction: row;
        background-color: #fff;
    }

    .default {
        text-align: center;
        flex: 1;
        margin: 10px 10px;

    }

    .red .ictext {
        color: #1AAD19
    }

    .red .row {
        text-align: center;
        flex: 1;
        border-bottom: 2px solid #1AAD19;
        margin: 8px 10px;

    }

    .card-title {
        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }

    .dhbtn {
        background: #FA8454;
        font-size: 13px;
        padding: 0px 15px;
        display: inline-block;
        line-height: 26px;
        border-radius: 3px;
        margin-top: 5px;
    }

    .box .pic-box .card-logo {
        background: #fff;
        border: 2px solid #ffffff;
        width: 57%;
        height: auto;
    }

    .box .pic-box img {
        display: block;
        width: 100%;
        height: 100%;
        margin: 42px auto;
        border-radius: 4px 4px 0 0;
    }

    .box .box-text {
        padding: 0px 9px 9px 9px;
    }

    .weui-panel {
        margin-top: 3px;
    }
</style>

<body>
<div class="container" id="container">
    <div class="harder">
        <div class="conter" id="id" data-id="{$user['card_id']}" data-openid="{$user['openid']}">
            <p>当前余额</p>
            <p class="bonus">{$user.balance}元</p>
        </div>
    </div>
    <hr style="margin:0px;height:4px;border:0px;color:#D5D5D5;"/>
    <div class="weui-tab__panel">
        <div class="nav bc_white">
            <div class="default red" onclick="getcate(this,'kind');" data-id="wx_balance">
                <div class="ictext ">会员卡记录</div>
                <div class="row"></div>
            </div>

            <div class="default" onclick="getcate(this,'kinds');" data-id="wx_price">
                <div class="ictext ">微信支付记录</div>
                <div class="row"></div>
            </div>

        </div>
        <div class="weui-panel weui-panel_access" style="" id="kind" data-type="wx_balance">
            <div class="list-box" id="list-box" style="">

            </div>
            <div class="list-box" id="wxlist-box" style="">

            </div>
            <div class="clear"></div>
        </div>

    </div>


</div>
</body>
<script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="__STATIC_URL__/static/js/dropload2.js"></script>

<script type="text/javascript">
    wx.config({$share.wxjssdk});
    wx.ready(function () {
        wx.hideAllNonBaseMenuItem();

        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    });
</script>
<script>

    var page = 1
    var num = 5;
    var droploader = ''
    $(function () {
        load("wx_balance", "1", "kind", '1');
    });

    function getcate(obj, type) {

        $(obj).addClass("red").siblings().removeClass("red");
        var types = $(obj).attr("data-id");
        $("#kind").attr("data-type", types);

        if (types == "wx_balance") {
            $("#list-box").attr("style", "display:block");
            $("#wxlist-box").attr("style", "display:none");
            $("#list-box").children().remove()
            // load(types, "1", type,'2')
        } else if (types == "wx_price") {
            $("#list-box").attr("style", "display:none");
            $("#wxlist-box").attr("style", "display:block");

            // load(types, "1", type,'2')
        }

        page = 1
        $("#wxlist-box").children().remove()
        droploader.unlock()
        droploader.noData(false)
        droploader.resetload()
    }

    function load() {

        $(".dropload-down").remove();

        droploader = $('#kind').dropload({
            scrollArea: window,
            loadDownFn: function (me) {
                var flag = false
                getlist(me, flag)
            }
        });
    }

    function getlist(me, flag) {
        var card_id = $("#id").attr("data-id");
        var openid = $("#id").attr("data-openid");
        var types = $("#kind").attr("data-type")
        $.ajax({
            url: "{:url('')}",
            type: 'post',
            dataType: 'json',
            data: {
                type: types,
                card_id: card_id,
                openid: openid,
                page: page
            },
            success: function (res) {
                var pagenum = parseInt(res.page_num);
                var pages = parseInt(res.page);

                var result = '';
                var data = res.data;
                if (data == "" && pagenum == 0) {
                    $("#zanwu").attr("style", "display:block")
                }
                var html = "";
                var html3 = "";
                var length = data.length;
                if (res.code == 0) {
                    $("#zanwu").attr("style", "display:none")
                    $(".dropload-load").show();
                    var img_url = "";
                    page++
                    for (var i = 0; i < length; i++) {
                        url = "/mobile.php?s=/carduser/consumedetail/";
                        if (types == "wx_balance") {
                            img_url = "__STATIC_URL__/static/mobile/images/cardxf.png";
                        } else if (types == "wx_price") {
                            img_url = "__STATIC_URL__/static/mobile/images/wxxf.png";
                        }
                        result += ' <div class="weui-panel__bd">\n' +
                            '            <a href="' + url + 'recordid/' + data[i].id + '/type/' + types + '.html" class="weui-media-box weui-media-box_appmsg">\n' +
                            '                <div class="weui-media-box__hd">\n' +
                            '                    <img class="weui-media-box__thumb" src="' + img_url + '" alt="">\n' +
                            '                </div>\n' +
                            '                <div class="weui-media-box__bd neirong">\n' +
                            '                    <h4 class="weui-media-box__title">' + data[i].merchant + '</h4>\n' +
                            '                    <p class="weui-media-box__desc">' + data[i].add_time + '</p>\n' +
                            '                </div>\n' +
                            '                <div class="weui-media-box__bd yue">' + data[i].price + '</div>\n' +
                            '            </a>\n' +
                            '        </div>';

                        if (length < 5 && i == (length - 1) && pages == pagenum) {
                            // 锁定//表示一页未满已经没有数据
                            me.lock('down');
                            // 无数据
                            me.noData();
                            break;
                        }
                    }
                    // $("#list-box").append(result)
                    console.log(123, page, pages)
                    var pa=page-1
                    if(pa==pages){
                        if (types == "wx_balance") {
                            $("#list-box").append(result)
                            me.resetload();
                        } else if (types == "wx_price") {
                            $("#wxlist-box").append(result)
                            me.resetload();
                        }
                    }




                } else {

                    me.resetload();
                    me.lock('down');
                    // 无数据
                    me.noData();

                    if (page == 1) {
                        $(".dropload-down").css("display", "none");//没有更多数据的文字
                    }
                }
                ;
            },
            error: function (xhr, type) {
                // 即使加载出错，也得重置
                me.resetload();
                me.lock();
                // 无数据
                me.noData();

            }
        });
    }
</script>
<script type="text/javascript">
    $(function () {
        $('.weui-navbar__item').on('click', function () {
            var index = $(this).index();
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
            $(".weui-tab__panel").css("display", "none").eq(index).css("display", "block");
        });

    });
</script>
<script type="text/javascript">
    $(function () {
        $(".sm").click(function () {
            if ($(".chakan").css("display") == "none") {
                $(".chakan").css("display", "block");
            } else {
                $(".chakan").css("display", "none");
            }

        })
    })
</script>
</html>